<template>
  <!-- 退货申请处理  -->
  <div class='app-container'>
    <div class="search">
      <!-- 筛选查询 -->
      <div class="search_top">
        <div class="search_top_left">
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div class="search_top_right">
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="getAdminList">查询搜索</el-button>
        </div>
      </div>
      <!-- 表单搜索 -->
      <el-form :inline="true" :model="applyFormData" ref="applyForm" class="demo-form-inline">
        <el-form-item label="输入搜索：" prop="id">
          <el-input v-model="applyFormData.id" placeholder="服务单号" clearable />
        </el-form-item>
        <el-form-item label="处理状态：" prop="status">
          <el-select v-model="applyFormData.status" placeholder="全部" clearable>
            <el-option label="待处理" value="0" />
            <el-option label="退货中" value="1" />
            <el-option label="已完成" value="2" />
            <el-option label="已拒绝" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间：" prop="createTime">
          <el-date-picker v-model="applyFormData.createTime" type="date" placeholder="请选择时间" clearable
            value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="操作人员：" prop="handleMan">
          <el-input v-model="applyFormData.handleMan" placeholder="全部" clearable />
        </el-form-item>
        <el-form-item label="处理时间：" prop="handleTime">
          <el-date-picker v-model="applyFormData.handleTime" type="date" placeholder="请选择时间" clearable
            value-format="YYYY-MM-DD" />
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表单 -->
    <el-table ref="multipleTableRef" :data="tabList" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column property="id" label="服务单号" />
      <el-table-column label="申请时间">
        <template #default="{ row }">{{ row.createTime ? dayjs(row.createTime).format("YYYY-MM-DD") : "" }}</template>
      </el-table-column>
      <el-table-column property="memberUsername" label="用户账号" />
      <el-table-column property="" label="退款金额">
        <template #default="{ row }">
          {{ row.productRealPrice ? `￥${(row.productRealPrice).toFixed(2)}` : "" }}
        </template>
      </el-table-column>
      <el-table-column property="status" label="申请状态">
        <template #default="{ row }">
          {{ row.status === 0 ? "待处理" : row.status === 1 ? "退货中" : row.status === 2 ? "已完成" : "已拒绝" }}
        </template>
      </el-table-column>
      <el-table-column property="handleTime" label="处理时间">
        <template #default="{ row }">{{ row.createTime ? dayjs(row.createTime).format("YYYY-MM-DD") : "" }}</template>
      </el-table-column>
      <el-table-column label="操作" class="btns" fixed="right" width="100">
        <template #default="{ row }">
          <el-button @click="selectDetails(row.id)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="pag">
      <!-- 左侧批量操作 -->
      <div class="left_more">
        <el-select v-model="selectValue" class="m-2" placeholder="批量操作" size="large">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button type="primary" @click="submitDelete">确定</el-button>

      </div>
      <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
        :page-sizes="[5, 10, 15, 20]" background layout="total, sizes, prev, pager, next, jumper"
        :total="paginationParams.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import * as returnApply from "@/request/oms_returnApply"
import useTable from "@/hooks/umsTable"
import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';
const router = useRouter()
// 退货申请表单参数
const applyFormData = ref<IReturnApplyParamsModel>({
  createTime: "",//申请时间
  handleMan: "",//处理人员
  handleTime: "",//处理时间
  id: undefined,//服务单号
  receiverKeyword: undefined,//收货人姓名/号码
  status: undefined,//申请状态
})
const multipleSelection = ref<IReturnApplyItemResultModel[]>([])
const { tabList,
  paginationParams,
  handleSizeChange,
  handleCurrentChange,
  getAdminList } = useTable(returnApply.getReturnApplyList, applyFormData.value)
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}
const options = [{ value: 1, label: "批量删除" }]
const selectValue = ref()
// 确认批量删除
const submitDelete = () => {
  const ids = multipleSelection.value.map(item => item.id)
  if (selectValue.value === 1) {
    ElMessageBox.confirm("您确定要删除吗？", "删除提示",
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const id = ids.join(",")
        returnApply.deleteReturnApply({ ids: id }).then(res => {
          if (res.code === 200) {
            ElMessage.success("批量删除成功")
            getAdminList()
          } else if (res.code === 500) {
            ElMessage.error(res.message)
          }
        })
      }).catch(() => {
        ElMessage.success("已取消删除操作")
      })
  } else {
    ElMessage.error("请选择操作选项")
  }
}
const reset = () => {
  paginationParams.currentPage = 1;
  paginationParams.pageSize = 5;
  applyFormData.value.createTime = ""
  applyFormData.value.handleMan = ""
  applyFormData.value.handleTime = ""
  applyFormData.value.id = undefined
  applyFormData.value.receiverKeyword = ""
  applyFormData.value.status = undefined


}
// 查看详情
const selectDetails = (id: number) => {
  router.push({
    path: "returnApplyDetail",
    query: { id }
  })
}
</script>

<style lang="less" scoped>
.btns {
  width: 120px;
}

:deep .el-table .cell {
  text-align: center;
}

.search,
.el-table {
  box-shadow: 2px 3px 11px -5px;
}

.search {
  padding: 20px;
  margin-bottom: 30px;
}

.search_top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .search_top_left {

    display: flex;
    align-items: center;

    .el-icon {
      margin-right: 6px;
    }
  }
}

.pag {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left_more {
    display: flex;
    align-items: center;

    .el-select {
      margin-right: 8px;
    }
  }
}

.el-table {
  margin-bottom: 20px;
}
</style>